<template>
	<div class="">
		<div class="head">
			<div class="img">
				<img src="../../assets/img/newLogo.png" alt="">
			</div>
			<div class="form">
				<!-- <div class="box">
					<input type="text" placeholder="搜索学生" v-model="student" />
					<button @click="onStudent">搜索</button>
				</div>
				<div class="box">
					<input type="text" placeholder="搜索课程" v-model="course" />
					<button @click="onCourse">搜索</button>
				</div> -->
				<div style="width:445px;"></div>
				<div class="collects" @click="enshrine()">
					<span class="collect"></span>添加收藏
				</div>

				<el-dropdown trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
				      	<div class="info">
				      		<span class="name">{{username}}</span><i class="el-icon-arrow-down el-icon--right"></i>
						</div>
					</span>
					<el-dropdown-menu slot="dropdown"  @click="login">
						<el-dropdown-item command="a">注销登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	<el-dialog title="" :visible.sync="pop" size="tiny">
		<el-form :model="form" labelWidth="100px" :rules="rules" ref="rulesName">
			<el-form-item label="收藏名称" prop="name">
				<el-col :span="13">
					<el-input v-model="form.name" placeholder="请输入内容"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="分组名称" prop="group_id">
				<el-col :span="13">
					<el-select v-model="form.group_id" placeholder="请选择">
						<el-option v-for="(item,index) in option" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-col>
				<el-button type="primary" class="ma" @click="addShow" dis>添加</el-button>
			</el-form-item>
			<el-form-item v-show="show">
				<el-col :span="13">
					<el-input v-model="name"></el-input>
				</el-col>
				<el-button type="primary" class="ma" @click="Add">确定 </el-button>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="AddEnshrine">提 交</el-button>
		</div>
	</el-dialog>
	</div>
</template>
<script>
	import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";

	export default {
		components: {
			ElButton
		},
		data() {
			return {
				username: '',
				rules: {
					name: [{
						required: true,
						message: '请填写名称',
						trigger: 'blur'
					}],
					group_id: [{
						required: true,
						message: '请选择',
						type: 'number',
						trigger: 'blur'
					}]
				},
				show: false,
				value: '',
				pop: false,
				form: {
					name: '',
					group_id: ''
				},
				option: [],
				name: '',
				student: null,
				course: '',
				icon: false,
			}
		},

		created() {
			this.getOption()
			this.username = USERNAME
			console.log(this.keyword)
		},
		methods: {
			addShow() {
				this.show = true
			},

			Add() {
				let data = {
					name: this.name
				}
				this.apiPost('System/addEnshrineGroup', data).then(res => {
					let remind = res.error ? 'error' : 'success';
					_g.toastMsg(remind, res.msg);
					if(!res.error) {
						this.getOption()
						this.name = ''
					}
				})
				this.show = false

			},

			enshrine() {
				this.pop = true;
				console.log(this.$route.path)
			},

			getOption() {
				this.apiPost('System/myEnshrineGroup').then(res => {
					this.option = res
				})
			},

			AddEnshrine() {
				this.$refs.rulesName.validate((valid) => {
					if(valid) {
						let data = this.form
						data.src = this.$route.path
						this.pop = false
						this.apiPost('System/addEnshrine', data).then(res => {
							let remind = res.error ? 'error' : 'success';
							_g.toastMsg(remind, res.msg);
							if(!res.error) {
								this.form = {
									name: '',
									group_id: ''
								}
							} else {
								this.pop = true
							}
						})
					} else {
						return false
					}
				})
			},

			onStudent() {
				Lockr.set('StudentSearch', this.student)
				this.student = ''
				if(this.$route.path == '/studentSearch') {
					_g.shallowRefresh(this.$route.name)
				} else {
					router.push('/studentSearch')
				}
			},

			onCourse() {
				Lockr.set('CourseSearch', this.course)
				this.course = ''
				if(this.$route.path == '/courseSearch') {
					_g.shallowRefresh(this.$route.name)
				} else {
					router.push('/courseSearch')
				}
			},

			login() {
				this.$confirm('此操作将注销登录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.apiPost('index/logout').then(res => {
						this.$message({
							type: 'success',
							message: res.msg
						})
						router.push('/login')
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
					this.icon = false
				})
			},
			handleCommand(command) {
				if (command === 'a') {
					this.login()
				}
			}
		},
	}
</script>
<style scoped>
	.ma {
		margin-left: 10px;
	}

	.head {
		box-sizing: border-box;
		display: flex;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 80px;
		padding: 10px 64px;
	}

	.head .img {
		width: 371px;
		height: 63px;
	}

	.head img {
		width: 371px;
		height: 63px;
	}

	.form {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.form div {
		margin-left: 5%;
		white-space: nowrap;
		overflow: hidden;
	}

	.form div span {
		display: block;
	}

	.box {
		display: inline-flex;
		width: 240px;
		height: 28px;
	}

	.box input {
		flex: 1;
		text-indent: 1em;
		border: 1px solid #0177BF;
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
		outline: none;
	}

	.box button {
		width: 54px;
		height: 28px;
		color: #FFFFFF;
		line-height: 28px;
		background: rgba(1, 119, 191, 1);
		border-radius: 0 14px 14px 0;
		border: none;
		outline: none;
		cursor: pointer;
	}

	.collects {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120px;
		height: 26px;
		font-size: 14px;
		line-height: 26px;
		color: rgba(255, 150, 0, 1);
		border: 1px solid rgba(255, 150, 0, 1);
		border-radius: 14px;
		cursor: pointer;
	}

	.collect {
		width: 24px;
		height: 17px;
		background: url(../../img/cost.png) no-repeat;
		background-size: contain;
	}

	.info {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 20px;
		cursor: pointer;
	}

	.headimg {
		width: 20px;
		height: 20px;
		background: url(../../img/icon-head.png) no-repeat;
		background-size: 100%;
		border-radius: 50%;
	}

	.name {
		margin: 0 5px;
		font-size: 14px;
		font-family: MicrosoftYaHei;
		color: rgba(84, 84, 84, 1);
		white-space: nowrap;
	}

	.icon {
		display: block;
		width: 12px;
		height: 8px;
		background: url(../../img/close_hover_b.png) no-repeat;
		background-size: contain;
		transform: rotate(180deg);
		transition: .3s;
	}

	.up {
		transform: rotate(0deg);
	}

	.pop {
		position: absolute;
		top: 25px;
		left: -110px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: .3s;
	}

	.pop span {
		margin-right: 10px;
		font-size: 12px;
		color: #666666;
		white-space: nowrap;
	}
</style>
